<script setup lang="ts">
import { computed, inject, PropType, ref, Ref, watch } from "vue";
import { FieldsModle, Form, ThisModel } from "../../../types";

const form: ThisModel | undefined = inject('form');
const props = defineProps({
  modelValue: [Number, String, Object],
  model: {
    type: Object as PropType<FieldsModle>,
    required: true
  }
})
const initVal: Ref<any> = ref(undefined);

const fieldClass = computed(() => { 
  if (form) {
    return {
      "field-status-valid": form.status.valid,
      "field-status-disabled": form.status.disabled,
      "field-status-unvalid": !form.status.valid,
      "field-status-empty": form.status.empty,
      "field-status-view": form.status.view,
    };
  }
  return {};
});
watch(
  () => props.modelValue,
  (v, old) => {
    if (v !== undefined && v !== "" && old === undefined) initVal.value = v;
    // @te-ignore
    if (form?.modelValue[props.model.code] === undefined) {
      props.model.default
        ? form?.inputValue(props.model.code, props.model.default)
        : form?.inputValue(props.model.code, "");
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const input = (value: string) => {
  form?.inputValue(props.model.code, value)
}
</script>

<template>
  <el-input
    :class="fieldClass"
    v-model="props.modelValue"
    v-bind="props?.model.attrs"
    v-on="props?.model.listeners || {}"
    @input="input"
    :autosize="true"
    :type="props?.model.type === 'text' ? 'textarea' : 'text'"
  />
  <!-- <div>121</div> -->
</template>

<style scoped>
</style>
